<template>
  <div style="padding-left:10px; padding-right: 10px; width: calc(100vw - 200px)">
    <!--    搜索区域-->
    <div style="margin: 10px 0">
      <span style="color: #611ee3;font-size: large;">教练名：</span>
      <el-input v-model="search" placeholder="请输入教练名" style="width: 20%" clearable></el-input>
      <el-button style="margin-left: 5px; background-color: #409EFF; color: white" @click="load" plain>查询</el-button>
    </div>
    <el-table
        :data="tableData"
        border
        stripe
        style="width: 100%"
        id="rebateSetTable">
      <el-table-column
          prop="id"
          label="ID"
          sortable>
      </el-table-column>
      <el-table-column
          prop="userName"
          label="教练名">
      </el-table-column>
      <el-table-column
          prop="age"
          label="年龄">
      </el-table-column>
      <el-table-column
          prop="sex"
          label="性别">
      </el-table-column>
      <el-table-column
          prop="phone"
          label="电话">
      </el-table-column>
      <el-table-column
          prop="major"
          label="专业特长">
      </el-table-column>
      <el-table-column
          prop="remark"
          label="备注">
      </el-table-column>
      <el-table-column
          label="操作">
        <template #default="scope">
          <div style="display: flex; align-content: space-between">
            <el-button @click="deleteStatus(scope.row)" type="primary">预约</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div style="margin: 10px 0">
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
      <!--弹窗-->
      <el-dialog
          title="提示"
          v-model="deleteVisible"
          width="30%">
        <p style="margin-bottom: 30px;font-size: 17px;color: #f73c3c;">确定删除吗？</p>
        <span slot="footer" class="dialog-footer">
          <el-button @click="this.deleteVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleDelete(this.form.id)">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>

import request from "@/utils/request";

export default {
  name: 'Home',
  components: {},
  data() {
    return {
      form: {},
      search: '',
      currentPage4: 1,
      pageSize: 10,
      total: 0,
      dialogVisible: false,
      tableData: [],
      deleteVisible: false
    }
  },
  created() {
    this.load();
  },
  methods: {
    load() {
      request.get("/api/coach", {
        params: {
          pageNum: this.currentPage4,
          pageSize: this.pageSize,
          search: this.search
        }
      }).then(res => {
        console.log(res);
        this.tableData = res.data.records;
        this.total = res.data.total;
      })
    },
    deleteStatus(row) {
      this.deleteVisible = true;
      this.form = JSON.parse((JSON.stringify(row)));
    },
    handleSizeChange(pageSize) {//改变当前页面个数
      this.pageSize = pageSize;
      this.load();
    },
    handleCurrentChange(pageNum) {//改变当前页码
      this.currentPage4 = pageNum;
      this.load();
    },
    handleDelete(id) {
      console.log(id);
      // request.delete("/api/coach/" + id).then(res => {
      //   if (res.code === '0') {
      //     this.$message({
      //       type: "success",
      //       message: "删除成功"
      //     })
      //   } else {
      //     this.$message({
      //       type: "error",
      //       message: res.msg
      //     })
      //   }
      //   this.deleteVisible = false;//关闭弹窗
      //   this.load()//重新加载
      //
      // });
    }
  }
}
</script>
